<template>
    <div id="SalesPerCategory"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { RequestPlateformData } from '@/api/path/index.js'
const plateformMes = ref()
const xAxis = ref<any>([])
const seriesData = ref<any>([])
const shopId = localStorage.getItem('ShopId')
const props = defineProps({
    salesGroupByType: Array,
})
const salesGroupByType = ref([])
onMounted(async () => {
    // salesInfo销售额
    var chartDom = document.getElementById('SalesPerCategory')
    for (let i = 0; i < props.salesGroupByType.length; i++) {
        xAxis.value[i] = []
        seriesData.value[i]=[]
        for (let j = 0; j < props.salesGroupByType[i].length; j++) {
            xAxis.value[i].push(props.salesGroupByType[i][j].month)
            seriesData.value[i].push(props.salesGroupByType[i][j].data)
        }
    }
        console.log('平台数据', xAxis.value)
        console.log('平台数据1111111111', props.salesGroupByType)
    var myChart = echarts.init(chartDom)
    var option
    option = {
        color: ['#08B9F9', '#14C9C9', '#1B89D8', '#FF0087', '#d4a1fd'],
        title: {
            text: '各品类销量',
            top: '20px',
            left: '3%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        legend: {
            data: ['底盘件', '保养件', '车壳件', '内饰件', '外观件'],
            icon: 'square',
            top: '60px',
            left: '3%',
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '4%',
            top: '110px',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xAxis.value[0],
            },
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                name: '底盘件',
                type: 'line',

                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#08B9F9',
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(8, 185, 249,0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(8, 185, 249,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value[0],
            },
            {
                name: '保养件',
                type: 'line',

                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#14C9C9',
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(20, 201, 201,0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(20, 201, 201,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value[1],
            },
            {
                name: '车壳件',
                type: 'line',

                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#1B89D8',
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(27, 137, 216,0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(27, 137, 216,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value[2],
            },
            {
                name: '内饰件',
                type: 'line',

                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#FF0087',
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 142, 157,0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(255, 142, 157,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value[3],
            },
            {
                name: '外观件',
                type: 'line',

                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#d4a1fd',
                },
                showSymbol: false,
                label: {
                    show: true,
                    position: 'top',
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(212, 161, 253,0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(212, 161, 253,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value[4],
            },
        ],
    }

    option && myChart.setOption(option)
})
</script>

<style scoped>
.main {
    background: rgb(212, 161, 253);
}
</style>
